
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI 3.x: CSS Fonts Sizing Example</title>
    <link rel="stylesheet" href="../../build/cssreset/reset.css" type="text/css">
    <link rel="stylesheet" href="../../build/cssfonts/fonts.css" type="text/css">
<style type="text/css" media="screen">
	.cssfonts--10 {font-size:77%;}
	.cssfonts--11 {font-size:85%;}
	.cssfonts--12 {font-size:93%;}
	.cssfonts--13 {font-size:100%;}
	.cssfonts--14 {font-size:108%;}
	.cssfonts--15 {font-size:116%;}
	.cssfonts--16 {font-size:123.1%;}
	.cssfonts--17 {font-size:131%;}
	.cssfonts--18 {font-size:138.5%;}
	.cssfonts--19 {font-size:146.5%;}
	.cssfonts--20 {font-size:153.9%;}
	.cssfonts--21 {font-size:161.6%;}
	.cssfonts--22 {font-size:167%;}
	.cssfonts--23 {font-size:174%;}
	.cssfonts--24 {font-size:182%;}
	.cssfonts--25 {font-size:189%;}
	.cssfonts--26 {font-size:197%;}
</style>
</head>
<body>

<h1>The first row is the size set with CSS Fonts. The second row is the reference size set with pixels.</h1>

<p class="cssfonts--10">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:10px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--11">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--12">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--13">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:13px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--14">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:14px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--15">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:15px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--16">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:16px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--17">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:17px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--18">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:18px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--19">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:19px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--20">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--21">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:21px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--22">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:22px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--23">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:23px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--24">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:24px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--25">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:25px;">Lorem ipsum dolor sit amet, consectetur.</p>

<p class="cssfonts--26">Lorem ipsum dolor sit amet, consectetur.</p>
<p style="font-size:26px;">Lorem ipsum dolor sit amet, consectetur.</p>

</body>
</html>
